<template>
	<view class="container">
		<view v-if="checkFlag" style="display: flex;flex-direction: column;gap: 20rpx;padding-bottom: 120rpx;">
			<uni-card v-for="(item, index) in list" :key="index">
				<view class="inner-container">
					<view class="line-style">
						<view class="text-item">
							<view>需求单号</view>
							<view>{{ item.order }}</view>
						</view>
					</view>
					<view class="line-style">
						<view class="text-item">
							<view>料架编号</view>
							<view>{{ item.shelfId }}</view>
						</view>
					</view>
					<view class="line-style">
						<view class="text-item">
							<view>指示灯</view>
							<view
								:style="{
									background: `radial-gradient(circle, ${getColor(item.color)} 50%, transparent 90%)`,
									width: '40rpx',
									height: '40rpx',
									borderRadius: '50%',
									boxShadow: `0 0 10rpx ${getColor(item.color)}, 0 0 20rpx ${getColor(item.color)}, inset 0 0 10rpx rgba(255, 255, 255, 0.5)`
								}"
							></view>
						</view>
					</view>
				</view>
			</uni-card>
<!-- 			<view class="commonButton">
				<u-button type="warning" @click="submitUnBind">解绑订单</u-button>
			</view> -->
		</view>
		<view v-else style="display: flex;flex-direction: column;gap: 10rpx;">
			<view style="display: flex;">
				<view style="flex: 3;font-weight: 600;" @click="test">需求单号</view>
				<view style="flex: 2;font-weight: 600;">货架灯</view>
			</view>
			<view style="display: flex;align-items: center;" v-for="(item, index) in needList" :key="index">
				<span style="flex: 3;font-size: 28rpx;">{{ item.order }}</span>
				<uni-data-select
					style="flex: 2;"
					:clear="true"
					v-model="selectColor[index]"
					:localdata="colorList"
					:disabled="item.bindStatus === 1"
					@change="handlerChange($event, item.order)"
				></uni-data-select>
			</view>
			<view class="commonButton">
				<u-button type="primary" @click="bindOrder">绑定需求单</u-button>
			</view>
		</view>
		<u-toast ref="uToast"></u-toast>
		<u-notify ref="uNotify"></u-notify>
		<!-- 表单 -->
		<u-modal
			:show="show"
			:title="title"
			showCancelButton
			confirmText='确定'
			cancelText='取消'
			confirmColor='#3c9cff'
			cancelColor='#f56c6c'
			:closeOnClickOverlay="false"
			@confirm="submitConfim"
			@cancel="submitCancel"
		>
			<view style="width: 100%;max-height: 500rpx;overflow-y: auto;">
				<checkbox-group @change="handlerClickOrder">
					<u-cell :title="item.order" v-for="(item, index) in orderList" :key="index" style="height: 100rpx;">
						<view slot="value">
							<label>
								<checkbox :value="'order' + index" :checked="item.isChecked" />
							</label>
						</view>
					</u-cell>
				</checkbox-group>
			</view>
		</u-modal>
	</view>
</template>

<script>
	import { mapState } from 'vuex'
	import uniDataSelect from '../../../../node_modules/@dcloudio/uni-ui/lib/uni-data-select/uni-data-select.vue'
	import { unBindLightMaterialAPI, displayColorAPI, bindOrderAPI, alreadyBindOrderAPI, submitUnBindAPI } from '@/api/work/outbound.js'
	import {
		uniCard
	} from '@dcloudio/uni-ui'
	export default {
		components: {
			uniCard,
			uniDataSelect,
		},
		data() {
			return {
				rackCode: '',
				list: [],
				checkFlag: false,
				colorList: [
					{text: '红色', value: 8, disable: false},
					{text: '蓝色', value: 3, disable: false},
					{text: '黄色', value: 4, disable: false},
					{text: '紫色', value: 5, disable: false},
					{text: '青色', value: 6, disable: false}
				],
				selectColor: [],
				needList: [],
				show: false,
				title: '已绑定订单号',
				orderList: []
			};
		},
		onLoad(options) {
			this.rackCode = options.rackCode
		},
		computed: {
			...mapState(['macAddress'])
		},
		mounted() {
			this.displayColor()
			this.alreadyBindOrder()
		},
		methods: {
			async alreadyBindOrder() {
				const submitForm = {
					url: this.macAddress
				}
				const res = await alreadyBindOrderAPI(submitForm)
				if (res.code === 200) {
					this.orderList = res.data.map(item => {
						return {
							order: item,
							isChecked: false
						}
					})
				}
			},
			handlerClickOrder(e) {
				const list = e.detail.value.map(item => {
					return Number(item.split('order')[1])
				})
				list.forEach(index => {
					if (this.orderList[index].isChecked === false) {
						this.orderList[index].isChecked = true
					}
				})
			},
			async submitConfim() {
				const result = this.check()
				if (!result) {
					return this.$refs.uNotify.show({
						type: 'warning',
						message: '请勾选需要解绑的订单号',
						duration: 3000,
						color: '#fff'
					})
				}
				const submitForm = {
					bos: this.orderList,
					url: this.macAddress
				}
				const res = await submitUnBindAPI(submitForm)
				if (res.code === 200) {
					this.show = false
					// this.orderList = []
					this.$refs.uToast.show({
						type: 'success',
						message: '解绑成功'
					})
				} else {
					this.show = false
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			check() {
				const flag = this.orderList.some(item => item.isChecked === true)
				if (flag) {
					return true
				} else {
					return false
				}
			},
			submitCancel() {
				this.show = false
				this.orderList.forEach(item => {
					item.isChecked = false
				})
			},
			submitUnBind() {
				this.show = true
			},
			async bindOrder() {
				const submitForm = {
					camp: this.needList.map(item => {
						if (item.bindStatus && item.bindStatus === 1) {
							return item
						} else if (item.color && !item.bindStatus) {
							return {
								...item,
								bindStatus: 0
							}
						} else {
							return null
						}
					}).filter(v => v !== null),
					rackCode: this.rackCode,
					url: this.macAddress
				}
				const res = await bindOrderAPI(submitForm)
				if (res.code === 200) {
					this.colorList = [
						{text: '红色', value: 8, disable: false},
						{text: '蓝色', value: 3, disable: false},
						{text: '黄色', value: 4, disable: false},
						{text: '紫色', value: 5, disable: false},
						{text: '青色', value: 6, disable: false}
					]
					this.selectColor = [],
					this.needList = []
					this.checkFlag = true
					this.list = res.data.result
					this.$refs.uToast.show({
						type: 'success',
						message: '绑定成功'
					})
				} else {
					return this.$refs.uToast.show({
						type: 'warning',
						message: res.message
					})
				}
			},
			async displayColor() {
				const submitForm = {
					rackCode: this.rackCode,
					url: this.macAddress
				}
				// 请求数据
				const res = await displayColorAPI(submitForm)
				if (res.code === 200) {
					this.needList = res.data.compVos.map(item => {
						if (item.color) {
							return {
								...item,
								bindStatus: 1
							}
						} else {
							return {
								...item,
								color: ''
							}
						}
					})
				}
				// 假设请求完毕
				this.selectColor = new Array(this.needList.length).fill('')
				this.needList.forEach((item, index) => {
				  if (item.color) {
				    this.selectColor[index] = item.color
						const Index = this.colorList.findIndex(v => v.value === item.color)
						this.colorList[Index].disable = true
				  }
				})
				// console.log(this.selectColor)
			},
			async unBindLightMaterial() {
				const submitForm = {
					rackCode: this.rackCode,
					url: this.macAddress
				}
				const res = await unBindLightMaterialAPI(submitForm)
				this.list = res.data
			},
			handlerChange(e, val) {
				const index = this.needList.findIndex(item => item.order === val)
				if ((e !== this.needList[index].color) && this.needList[index].color !== '') {
					if (!e) {
						const index = this.needList.findIndex(item => item.order === val)
						const Index = this.colorList.findIndex(v => v.value === this.needList[index].color)
						this.colorList[Index].disable = false
						this.needList[index].color = ''
						return
					}
					const itemIndex = this.colorList.findIndex(item => item.value === this.needList[index].color)
					this.colorList[itemIndex].disable = false
					this.needList[index].color = e
				}
				if (e && val) {
					const Index = this.colorList.findIndex(v => v.value === e)
					const index = this.needList.findIndex(item => item.order === val)
					this.selectColor[index] = this.colorList[Index].value
					this.colorList[Index].disable = true
					this.needList[index].color = this.colorList[Index].value
				} else {
					const index = this.needList.findIndex(item => item.order === val)
					const Index = this.colorList.findIndex(v => v.value === this.needList[index].color)
					this.colorList[Index].disable = false
					this.needList[index].color = ''
				}
			},
			getColor(lightColor) {
				switch (lightColor) {
					case 8:
						return '#ff0000';
					case 3:
						return '#3c9cff';
					case 4:
						return '#f9ae3d';
					case 5:
						return '#FF00FF';
					case 6:
						return '#00FFFF';
					default:
						return '#fff';
				}
			},
		}
	}
</script>

<style lang="scss">
::v-deep uni-view.uni-card {
	margin: 0 !important;
}
.commonButton {
	width: 100%;
	display: flex;
	gap: 20rpx;
	position: fixed;
	left: 0;
	bottom: 0;
	box-sizing: border-box;
	padding: 15rpx;
	justify-content: space-between;
	background-color: #fff;
}
.inner-container {
	display: flex;
	flex-direction: column;
	gap: 20rpx;
	.line-style {
		display: flex;
		justify-content: space-between;
		gap: 40rpx;
		.text-item {
			display: flex;
			flex: 1;
			justify-content: space-between;
			font-weight: 600;
		}
	}
}

::v-deep uni-view.u-modal__content {
	padding: 0 !important;
}
</style>
